/*
 * Copyright (C) Research In Motion Limited, 2012. All rights reserved.
 */

html {
    overflow: hidden;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Myriad Pro", "Arial", "Helvetica", sans-serif;
    font-size: 40px;

    -webkit-user-select: none;
    user-select: none;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;
    -webkit-box-pack: center;

    display: box;
    box-orient: vertical;
    box-align: center;
    box-pack: center;
}

.popup-area {
    width: 100%;
    height: 100%;

    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

    .popup-area>:first-child {
        -webkit-box-flex: 1;
        box-flex: 1;
    }

    .popup-buttons {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: stretch;

        border-image-source: url("");
        border-image-slice: 14 14 14 14 fill;
        border-width: 14px;

        text-align: center;
    }

        .popup-button-divider {
            width: 2px;
            background-color: rgba(0, 0, 0, 0.2);
            border-width: 14px 0;
            /* border image takes an image, so use a solid-colour gradient */
            border-image-source: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 0%);
            border-image-slice: 1 0 1 0;
            border-image-outset: 1 0 1 0;
        }

        .popup-button {
            color: inherit;
            font: inherit;
            text-shadow: rgba(255, 255, 255, 0.5) 0 -2px;
            padding: 0;
            margin: 0;
            background: none;
            line-height: 200%;
            display: block;

            width: 0;
            -webkit-box-flex: 1;

            border: 14px solid transparent;
        }

        .popup-button:active { /* all current popups have at most two buttons, so this is unused atm */
            border-image-source: url("");
            border-image-slice: 1 0 1 0 fill;
            padding: 14px;
            margin: -14px;
        }

        .popup-button:first-child:active { /* TODO: RTL */
            border-image-source: url("");
            border-image-slice: 14 0 14 14 fill;
            border-image-width: 1 0 1 1;
            padding: 14px;
            margin: -14px;
        }

        .popup-button:last-child:active { /* TODO: RTL */
            border-image-source: url("");
            border-image-slice: 14 14 14 0 fill;
            border-image-width: 1 1 1 0;
            padding: 14px;
            margin: -14px;
        }

        .popup-button:only-child:active {
            border-image-source: url("");
            border-image-slice: 14 14 14 14 fill;
            border-image-width: 1 1 1 1;
            padding: 14px;
            margin: -14px;
        }
